<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>编辑折线、多边形、圆</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=0d9bad43f759ff12d88ace4ff46323d8&plugin=AMap.PolyEditor,AMap.Autocomplete,AMap.MouseTool,AMap.CircleEditor"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container"></div>
<div id="myPageTop">
    <table>
        <tr>
            <td>
                <label>按关键字搜索：</label>
            </td>
            <td class="column2">
                <label>标记门店经纬度：</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" placeholder="请输入关键字进行搜索" id="tipinput">
            </td>
            <td class="column2">
                <input type="text"  readonly="true" id="lnglat" readonly="true">
            </td>
        </tr>
    </table>
</div>

<div class="button-group">
    <input type="button" class="button" value="开始编辑多边形" onClick="init();"/>
    <input type="button" class="button" value="完成" onClick="closeEditPolygon();"/>     
    <input type="button" class="button" value="刷新" onClick="clearEditPolygon();"/>     
</div>
<script>

    var editorTool, map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.403322, 39.900255],//地图中心点
        zoom: 13 //地图显示的缩放级别
    });

    var beginNum = 0;
    var clickListener ;
    var beginPoints;
    var beginMarks ;
    var polygonEditor;
    var resPolygon = [];
    var resNum = 0;
    init();
    function init(){
        beginPoints = [];
        beginMarks = [];
        beginNum = 0;
        polygonEditor = '';
        clickListener = AMap.event.addListener(map, "click", mapOnClick);
        /*
        var str = '[{"J":39.91789947393269,"G":116.36744477221691,"lng":116.367445,"lat":39.917899},{"J":39.91184292800211,"G":116.40658356616223,"lng":116.406584,"lat":39.911843},{"J":39.88616249265181,"G":116.37963272998047,"lng":116.379633,"lat":39.886162}]';
        var arr = json2arr(str);
        createPolygon(arr);*/
    }
    
    function mapOnClick(e) {
        // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        beginMarks.push(addMarker(e.lnglat));
        beginPoints.push(e.lnglat);
        beginNum++;
        if(beginNum == 3){
            AMap.event.removeListener(clickListener);
            var polygon = createPolygon(beginPoints);
            polygonEditor = createEditor(polygon);
            clearMarks();
        }
    };


    function createPolygon(arr){
        var polygon = new AMap.Polygon({
            map: map,
            path: arr,
            strokeColor: "#0000ff",
            strokeOpacity: 1,
            strokeWeight: 3,
            fillColor: "#f5deb3",
            fillOpacity: 0.35
        });
        return polygon;
    }

    function createEditor(polygon){
        var polygonEditor = new AMap.PolyEditor(map, polygon);
        polygonEditor.open();
        AMap.event.addListener(polygonEditor,'end',polygonEnd);
        return polygonEditor;
    }

    function closeEditPolygon(){        
        polygonEditor.close();
    }

    function clearEditPolygon(){                
        map.clearMap();
    }    

    function polygonEnd(e){
        resPolygon.push(e.target);
        //alert(resPolygon[resNum].contains([116.386328, 39.913818]));
        appendHideHtml(resNum,e.target.getPath());
        
        resNum++;
        //init();
    }

    function appendHideHtml(index,arr){
        var strify = JSON.stringify(arr);
        var html = '<input type="hidden" id="index'+index+'" name="paths[]" value="'+strify+'">';
        $('body').append(html);
        console.log(html);
    }

    

    function clearMarks(){
        map.remove(beginMarks);
    }

    function json2arr(json){
        var arr = JSON.parse(json);
        var res = [];
        for (var i = 0; i < arr.length; i++) {
            var line = [];
            line.push(arr[i].lng);
            line.push(arr[i].lat);
            res.push(line);
        };
        return res;
    }


     // 实例化点标记
    function addMarker(lnglat) {
        
        var marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: lnglat
        });
        marker.setMap(map);
        return marker;
    }

    
     ///////为地图注册click事件获取鼠标点击出的经纬度坐标
    //var clickEventListener = map.on('click', function(e) {
    //    document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
    //});

    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });

    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        if (e.poi && e.poi.location) {
            map.setZoom(16);
            map.setCenter(e.poi.location);
        }
    }



    ////////////////////////////////右击事件
    var markers = [];
    var markerLocal;
    var contextMenu = new AMap.ContextMenu();  //创建右键菜单
    var mouseTool = new AMap.MouseTool(map);

    

    //右键显示全国范围
    contextMenu.addItem("删除门店坐标", function(e) {
        map.remove(markers);
        document.getElementById("lnglat").value = "";
        //map.setZoomAndCenter(4, [108.95, 34.26]);
    }, 0);
    
    //右键添加Marker标记
    contextMenu.addItem("标记门店坐标", function(e) {
            marker = new AMap.Marker({
            map: map,
            position: contextMenuPositon //基点位置
        });
            markers.push(marker);
    }, 1);

    //地图绑定鼠标右击事件-->弹出右键菜单
    map.on('rightclick', function(e) {
        contextMenu.open(map, e.lnglat);  
        markerLocal=e.lnglat;
        
        document.getElementById("lnglat").value = markerLocal;
        //console.log(=e.lnglat);      
        contextMenuPositon = e.lnglat;

    });

    
    //AMap.event.addDomListener(document.getElementById('polygon'), 'click', function() {
    //    mouseTool.polygon();
    //}, false);

	$.confirm({
    title: 'Confirm!',
    content: 'Simple confirm!',
    confirm: function(){
        $.alert('Confirmed!');
    },
    cancel: function(){
        $.alert('Canceled!')
    }
	});   
	
	
	//var mask_div = document.createElement('div');
    //mask_div.id = 'mask_div1';
    //mask_div.appendChild(document.createTextNode("test"));
    //mask_div.style.position = "absolute";
    //mask_div.style.left =  '20px';
    //mask_div.style.top =  '20px';
    //mask_div.style.overflow = "hidden";
    //mask_div.style.zIndex = "9999";
    //mask_div.style.opacity = 0.3;
　　    //document.body.appendChild(mask_div);



function watermark(settings) {

    //默认设置
    var defaultSettings={
        watermark_txt:"text",
        watermark_x:20,//水印起始位置x轴坐标
        watermark_y:20,//水印起始位置Y轴坐标
        watermark_rows:20,//水印行数
        watermark_cols:20,//水印列数
        watermark_x_space:100,//水印x轴间隔
        watermark_y_space:50,//水印y轴间隔
        watermark_color:'#000000',//水印字体颜色
        watermark_alpha:0.3,//水印透明度
        watermark_fontsize:'18px',//水印字体大小
        watermark_font:'微软雅黑',//水印字体
        watermark_width:120,//水印宽度
        watermark_height:80,//水印长度
        watermark_angle:15//水印倾斜度数
    };
    //采用配置项替换默认值，作用类似jquery.extend
    if(arguments.length===1&&typeof arguments[0] ==="object" )
    {
        var src=arguments[0]||{};
        for(key in src)
        {
            if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])
                continue;
            else if(src[key])
                defaultSettings[key]=src[key];
        }
    }

    var oTemp = document.createDocumentFragment();

    //获取页面最大宽度
    var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
    //获取页面最大长度
    var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);

    //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
    if (defaultSettings.watermark_cols == 0 ||
 　　　　(parseInt(defaultSettings.watermark_x 
　　　　+ defaultSettings.watermark_width *defaultSettings.watermark_cols 
　　　　+ defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) 
　　　　> page_width)) {
        defaultSettings.watermark_cols = 
　　　　　　parseInt((page_width
　　　　　　　　　　-defaultSettings.watermark_x
　　　　　　　　　　+defaultSettings.watermark_x_space) 
　　　　　　　　　　/ (defaultSettings.watermark_width 
　　　　　　　　　　+ defaultSettings.watermark_x_space));
        defaultSettings.watermark_x_space = 
　　　　　　parseInt((page_width 
　　　　　　　　　　- defaultSettings.watermark_x 
　　　　　　　　　　- defaultSettings.watermark_width 
　　　　　　　　　　* defaultSettings.watermark_cols) 
　　　　　　　　　　/ (defaultSettings.watermark_cols - 1));
    }
    //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
    if (defaultSettings.watermark_rows == 0 ||
 　　　　(parseInt(defaultSettings.watermark_y 
　　　　+ defaultSettings.watermark_height * defaultSettings.watermark_rows 
　　　　+ defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) 
　　　　> page_height)) {
        defaultSettings.watermark_rows = 
　　　　　　parseInt((defaultSettings.watermark_y_space 
　　　　　　　　　　　+ page_height - defaultSettings.watermark_y) 
　　　　　　　　　　　/ (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
        defaultSettings.watermark_y_space = 
　　　　　　parseInt((page_height 
　　　　　　　　　　- defaultSettings.watermark_y 
　　　　　　　　　　- defaultSettings.watermark_height 
　　　　　　　　　　* defaultSettings.watermark_rows) 
　　　　　　　　　/ (defaultSettings.watermark_rows - 1));
    }
    var x;
    var y;
    for (var i = 0; i < defaultSettings.watermark_rows; i++) {
        y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
        for (var j = 0; j < defaultSettings.watermark_cols; j++) {
            x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

            var mask_div = document.createElement('div');
            mask_div.id = 'mask_div' + i + j;
            mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
            //设置水印div倾斜显示
            mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.visibility = "";
            mask_div.style.position = "absolute";
            mask_div.style.left = x + 'px';
            mask_div.style.top = y + 'px';
            mask_div.style.overflow = "hidden";
            mask_div.style.zIndex = "9999";
            //mask_div.style.border="solid #eee 1px";
            mask_div.style.opacity = defaultSettings.watermark_alpha;
            mask_div.style.fontSize = defaultSettings.watermark_fontsize;
            mask_div.style.fontFamily = defaultSettings.watermark_font;
            mask_div.style.color = defaultSettings.watermark_color;
            mask_div.style.textAlign = "center";
            mask_div.style.width = defaultSettings.watermark_width + 'px';
            mask_div.style.height = defaultSettings.watermark_height + 'px';
            mask_div.style.display = "block";
            oTemp.appendChild(mask_div);
        };
    };
    document.body.appendChild(oTemp);
}

</script>

</body>
</html>